<template>
    <div class="searchList el-transfer-panel">
        <p class="headers">
            {{name}}<span v-if="dataList.length>0">({{dataList.length}})</span>
        </p>
        <div class="content">
            <div class="search">
                <el-input placeholder="请输入任务名称" v-model="searchValue" clearable @clear="inputChange" @input="inputChange" />
            </div>
            <div class="list">
                <el-checkbox-group v-show="dataList.length > 0" v-model="checkedData" class="is-filterable el-transfer-panel__list" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="item in dataList" :key="item[valueName]" class="transfer-block" :label="item[valueName]">
                        {{item[keyName]}}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div class="footer" v-if="leftFootBtn||rightFootBtn">
            <div class="flx" v-if="leftFootBtn">
                <el-checkbox v-model="allChecked" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
                    全选
                </el-checkbox>
                <el-checkbox v-model="hideChecked" v-if="hideCheckedShow" @change="hideBtn">隐藏已过期或禁止任务</el-checkbox>
            </div>
            <div class="right" v-if="rightFootBtn" @click="clearSelectList">清空</div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, reactive, computed, watch } from 'vue';
export default defineComponent({
    props: {
        // 默认列表数据
        propData: {
            type: Array,
            default: function() {
                return [];
            }
        },
        // 默认选中值
        selectData: {
            type: Array,
            default: function() {
                return [];
            }
        },
        // 名字
        name: {
            type: String,
            default: '列表'
        },

        // 列表显示名字取值
        keyName: {
            type: String,
            default: 'label'
        },
        // 列表key取值
        valueName: {
            type: String,
            default: 'id'
        },
        // 底部左侧按钮
        leftFootBtn: {
            type: Boolean,
            default: true
        },
        // 底部隐藏数据条件
        hideArr: {
            type: Object,
            default: function() {
                return {};
            }
        },
        // 底部右侧按钮
        rightFootBtn: {
            type: Boolean,
            default: false
        },
        // 隐藏已过期或禁止任务
        hideCheckedShow: {
            type: Boolean,
            default: false
        }
    },
    setup(props, { emit }) {
        let rememberList: any = reactive({
            data: props.propData
        });
        const data: any = reactive({
            searchValue: '',
            checkedData: [...[], ...props.selectData],
            isIndeterminate: false,
            allChecked: false,
            hideChecked: false,
            inputChange: () => {
                data.allChecked = false;
                data.checkedData = [];
                // if (data.checkedData.length == dataList.value.length && data.checkedData.length > 0) {
                //     data.allChecked = true;
                // } else {
                //     data.allChecked = false;
                // }
            },
            handleCheckAllChange: (val: any) => {
                if (val) {
                    let arr: any[] = [];
                    dataList.value.forEach((item: any) => {
                        arr.push(item[props.valueName]);
                    });
                    data.checkedData = arr;
                } else {
                    data.checkedData = [];
                }
                data.isIndeterminate = false;
                emit('itemclick', data.checkedData);
            },
            handleCheckedCitiesChange: (val: any) => {
                let checkedCount = val.length;
                data.allChecked = checkedCount === dataList.value.length;
                data.isIndeterminate = checkedCount > 0 && checkedCount < dataList.value.length;

                emit('itemclick', data.checkedData);
            },
            hideBtn: () => {
                // // 处理已经绑定的值
                if (data.hideChecked) {
                    let arr: any[] = [];
                    dataList.value.forEach((item: any, index: number) => {
                        if (data.checkedData.includes(item[props.valueName])) {
                            arr.push(item[props.valueName]);
                        }
                    });
                    data.checkedData = arr;
                }
                if (data.checkedData.length == dataList.value.length && data.checkedData.length > 0) {
                    data.allChecked = true;
                } else {
                    data.allChecked = false;
                }
                emit('itemclick', data.checkedData);
            },
            clearSelectList: () => {
                data.searchValue = '';
                data.checkedData = [];
                data.allChecked = false;
                emit('clearRight');
            }
        });
        let dataList = computed(() => {
            let arr: any[] = [];

            if (data.searchValue) {
                rememberList.data.forEach((item: any) => {
                    if (item[props.keyName].includes(data.searchValue)) {
                        arr.push(item);
                    }
                });

                emit('itemclick', data.checkedData);
            }
            // 处理隐藏条件
            if (data.hideChecked) {
                if (!data.searchValue) {
                    arr = [...[], ...rememberList.data];
                }
                let newArr: any[] = [];
                arr.forEach((item: any) => {
                    let status = true;
                    for (let i in props.hideArr) {
                        if (item[i] == props.hideArr[i]) {
                            status = false;
                            break;
                        }
                    }
                    if (status) {
                        newArr.push(item);
                    }
                });
                arr = newArr;
            }
            if (data.searchValue || data.hideChecked) {
                return arr;
            } else {
                return [...[], ...rememberList.data];
            }
        });
        watch(
            () => props.propData,
            (newVal: any[], oldVal: any[]) => {
                data.allChecked = false;
                data.isIndeterminate = false;
                // data.checkedData = [];
                rememberList.data = newVal;
            }
        );
        watch(
            () => props.selectData,
            (newVal: any[], oldVal: any[]) => {
                data.checkedData = [...[], ...props.selectData];
                console.log('----------------------------');
                console.log(data.checkedData);
            }
        );
        return { dataList, ...toRefs(data) };
    }
});
</script>

<style lang="scss" scoped>
.searchList {
    --border-color: #ebeef5;
    width: 340px;
    // height: 400px;
    border-radius: 2px;
    color: #606266;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    .headers {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding: 0 16px;
        background-color: #f5f7fa;
        border-bottom: 1px solid var(--border-color);
        color: var(--color);
    }
    .content {
        display: flex;
        flex-direction: column;
        height: 240px;
        padding: 16px;
    }
    .search {
        height: 32px;
        line-height: 32px;
        margin-bottom: 10px;
    }
    .list {
        flex: 1;
        font-size: 12px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .transfer-block {
        display: block !important;
        height: 30px;
        line-height: 30px;
    }
    .footer {
        height: 42px;
        line-height: 42px;
        padding: 0 16px;
        border-top: 1px solid var(--border-color);
        .flx {
            height: inherit;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .right {
            float: right;
            height: inherit;
            text-decoration: underline;
            cursor: pointer;
            &:hover {
                color: #409eff;
            }
        }
    }
}
</style>
<style lang="scss">
.searchList {
    .transfer-block {
        .el-checkbox__input {
            position: absolute;
            top: 8px;
        }

        .el-checkbox__label {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
            box-sizing: border-box;
            padding-left: 24px;
            line-height: 30px;
        }
    }
}
</style>